<script lang="ts" setup>
import { useTemplateRef, onMounted, nextTick, ref, onBeforeUnmount } from 'vue';
import { QrCode } from '@ark-ui/vue/qr-code';
import { Clipboard } from '@ark-ui/vue/clipboard';
import html2canvas from 'html2canvas-pro';
import fileSaver from 'file-saver';
import { useAppStore } from '@/mobile/stores/app';

const props = defineProps({
  shareUrl: {
    type: String,
    default: '',
  },
})
const appStore = useAppStore();
const qrCodeValue = ref(props.shareUrl);
const contentRef = useTemplateRef('content');
const emit = defineEmits(['close']);
const isScreenshot = ref(false)

const saveImage = async () => {
  isScreenshot.value = true

  await nextTick();

  // 这样写的目的是为了避免 html2canvas 的时候页面闪烁
  isScreenshot.value = false

  if (contentRef.value) {
    const canvas = await html2canvas(contentRef.value, {
      useCORS: true,
      height: 660,
    });

    canvas.toBlob((blob) => {
      if (blob) {
        fileSaver.saveAs(blob, 'share.png');
      }
    });
  }
}

onMounted(() => {
  document.body.style.overflow = 'hidden'
});

onBeforeUnmount(() => {
  document.body.style.overflow = 'auto'
})
</script>

<template>
  <div ref="content" class="component-share-card fixed bottom-0 left-0 right-0 top-0 z-10 h-100vh overflow-auto">
    <img src="@/mobile/assets/share/bg.png" class="absolute left-0 right-0 top-48 z--1 h-570" alt="">

    <div class="flex-y-center px-20 py-12" v-if="!isScreenshot">
      <div class="i-icons:arrow-left-4 relative size-24 text-#6e6e6e" @click=" () => { emit('close') }"></div>
      <p class="mx-auto text-18 text-#292929 font-500 leading-20">{{ $t('mobile.home.shareCard.title') }}</p>
      <div class="size-24"></div>
    </div>

    <div class="relative mx-auto mt-60 h-424 w-316 bg-[url(@/mobile/assets/share/card-bg.png)] bg-contain bg-no-repeat px-48 py-32" :class="[isScreenshot ? 'mt-80' : 'mt-60']">
      <div class="absolute right--4 top-5 size-75 rotate--16 overflow-hidden border-2 border-#fff rounded-13 bg-#fff">
        <img :src="appStore.config.headLogo" :alt="appStore.config.name">
      </div>
      <img src="@/mobile/assets/share/card-line.png" class="absolute right-38 top--44 z-10 h-76 w-44 bg-cover bg-no-repeat" alt="">
      <div>
        <p class="text-16 text-#575757 font-400 leading-32">{{ $t('mobile.home.shareCard.text2') }}</p>
        <p class="mr-20 mt-8 truncate text-20 text-#292929 font-600 leading-40">{{ appStore.config.name }}</p>
        <i18n-t keypath="mobile.home.shareCard.text1" scope="global" tag="div" class="mt-8 truncate break-all text-16 text-#575757 font-400 leading-32">
          <span class="text-18 text-#292929 font-500 leading-32">{{ $t('mobile.home.shareCard.text3') }}</span>
        </i18n-t>
      </div>
      <div class="mx-auto mt-64 size-120 border-1 border-#f0f0f5 rounded-4 bg-#fff p-12">
        <QrCode.Root v-model="qrCodeValue" class="size-96" v-if="props.shareUrl">
          <QrCode.Frame class="size-full">
            <QrCode.Pattern />
          </QrCode.Frame>
          <QrCode.Overlay class="size-18 flex-center rounded-50% bg-white">
            <img class="size-18 rounded-50%" :src="appStore.config.headLogo" :alt="appStore.config.name">
          </QrCode.Overlay>
        </QrCode.Root>
      </div>
      <div class="mt-8 text-center">
        <p class="text-14 text-#adadad font-400 leading-24">{{ $t('mobile.home.shareCard.text4') }}</p>
        <p class="text-14 text-#292929 font-500 leading-24">{{ $t('mobile.home.shareCard.text5') }}</p>
      </div>
    </div>

    <div class="mx-auto mt-24 w-200 flex-y-center justify-between" v-if="!isScreenshot">
      <Clipboard.Root :value="props.shareUrl">
        <Clipboard.Control class="text-14 text-#adadad font-400 leading-24">
          <Clipboard.Trigger class="min-w-80 bg-transparent text-center">
            <Clipboard.Indicator>
              <button type="button" class="mx-auto block size-54 content-center border-1 border-#f0f0f5 rounded-12 bg-#fff">
                <div class="i-icons:link mx-auto size-20 text-#292929"></div>
              </button>
              <p class="mt-8">{{ $t('mobile.home.shareCard.copy') }}</p>
              <template #copied>
                <button type="button" class="mx-auto block size-54 content-center border-1 border-#f0f0f5 rounded-12 bg-#fff">
                  <div class="i-icons:link mx-auto size-20 text-#292929"></div>
                </button>
                <p class="mt-8">{{ $t('mobile.home.shareCard.copyed') }}</p>
              </template>
            </Clipboard.Indicator>
          </Clipboard.Trigger>
        </Clipboard.Control>
      </Clipboard.Root>

      <div class="min-w-80 text-center">
        <button type="button" class="mx-auto block size-54 border-1 border-#f0f0f5 rounded-12 bg-#fff" @click="saveImage">
          <div class="i-icons:download mx-auto size-20 text-#292929"></div>
        </button>
        <p class="mt-8 text-14 text-#adadad font-400 leading-24">{{ $t('mobile.home.shareCard.save') }}</p>
      </div>
    </div>

    <div class="mt-24 flex-center gap-16" v-if="isScreenshot">
      <img src="@/mobile/assets/common/logo-filled.png" class="size-36" alt="AtomGit LOGO">
      <div class="h-24 border-l-1 border-#f0f0f5"></div>
      <div>
        <p class="text-18 text-#292929 leading-20 font-[alimama-shu-hei-ti-bold-atomgit]">AtomGit</p>
        <p class="text-10 text-#adadad font-400 leading-20">{{ $t('mobile.home.shareCard.text6') }}</p>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.component-share-card {
  background: linear-gradient(207deg, #e7f1ff 0%, #fff 100%);
}
</style>
